<!-- 聊天容器组件 -->
<template>
  <view class="chat-container" @click="hideAllPanels">
    <!-- 电竞风格背景装饰 -->
    <view class="chat-bg-decoration">
      <view class="bg-line bg-line-1"></view>
      <view class="bg-line bg-line-2"></view>
      <view class="bg-circle bg-circle-1"></view>
      <view class="bg-circle bg-circle-2"></view>
    </view>
    
    <!-- 消息列表区域 -->
    <chat-message-list 
      ref="messageList"
      :bg-color="bgColor"
      :target-id="targetId"
      :is-target-online="isTargetOnline"
      :can-add-wechat="canAddWechat"
      @query="onQueryMessages"
      @message-long-press="onMessageLongPress"
      @message-resend="onMessageResend"
      @image-preview="onImagePreview"
      @keyboard-height-change="onKeyboardHeightChange"
      @keyboard-hide="onKeyboardHide"
      @add-wechat="onAddWeChat"
      @complete-wechat="onCompleteWeChat"
      @view-wechat="onViewWeChat"
    >
      <!-- 顶部插槽 -->
      <template #top>
        <slot name="top"></slot>
      </template>
      
      <!-- 底部插槽 - 输入区域 -->
      <template #bottom>
        <chat-input 
          ref="chatInput"
          :disabled="inputDisabled"
          :custom-emoji-list="emojiList"
          :is-vip="isVip"
          @send-text="onSendText"
          @tool-click="onToolClick"
          @show-vip-modal="onShowVipModal"
        />
        

      </template>
    </chat-message-list>
  </view>
</template>

<script>
import ChatMessageList from './ChatMessageList.vue';
import ChatInput from './ChatInput.vue';

export default {
  name: 'ChatContainer',
  components: {
    ChatMessageList,
    ChatInput
  },
  props: {
    // 聊天对象ID
    targetId: {
      type: [String, Number],
      required: true
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: '#020303'
    },
    // 是否禁用输入
    inputDisabled: {
      type: Boolean,
      default: false
    },
    // 自定义表情列表
    emojiList: {
      type: Array,
      default: null
    },
    // 是否自动加载消息
    autoLoad: {
      type: Boolean,
      default: true
    },
    // 对方是否在线
    isTargetOnline: {
      type: Boolean,
      default: true
    },
    // 是否可以添加对方微信
    canAddWechat: {
      type: Boolean,
      default: false
    },
    // 用户是否为VIP
    isVip: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedMessage: null // 当前选中的消息
    }
  },
  methods: {
    // 重新加载消息
    reload() {
      this.$refs.messageList.reload();
    },
	
    // 清空消息
    clear() {
      this.$refs.messageList.clear();
    },
    
    // 查询消息处理
    onQueryMessages(params) {
      // 确保传递所有参数，包括lastMessageId
      this.$emit('query-messages', params);
    },
    
    // 发送文本消息
    onSendText(text) {
      // 发出发送文本事件
      this.$emit('send-text', {
        text,
        targetId: this.targetId
      });
      
      // 延迟一小段时间后，检查是否需要显示"添加微信"提示
      // 延迟是为了确保新发送的消息已经添加到列表中
      setTimeout(() => {
        this.checkAddWeChatTip();
      }, 500);
    },
    
    // 检查是否需要显示添加微信提示
    checkAddWeChatTip() {
      this.$refs.messageList.checkAndShowAddWeChatTip();
    },
    
    // 工具点击处理
    onToolClick(tool) {
      // 发出工具点击事件
      this.$emit('tool-click', {
        tool,
        targetId: this.targetId
      });
    },

    // 显示VIP弹窗处理
    onShowVipModal(data) {
      // 向上传递显示VIP弹窗事件
      this.$emit('show-vip-modal', data);
    },
    
    // 添加一条消息
    addMessage(message) {
      this.$refs.messageList.addMessage(message);
      
      // 如果是自己发送的消息，延迟检查添加微信提示
      if (message.isSelf) {
        setTimeout(() => {
          this.checkAddWeChatTip();
        }, 500);
      }
    },
    
    // 更新消息
    updateMessage(messageId, updatedData) {
      this.$refs.messageList.updateMessage(messageId, updatedData);
    },
    
    // 删除消息
    deleteMessageById(messageId) {
      this.$refs.messageList.deleteMessage(messageId);
    },
    
    // 消息长按处理
    onMessageLongPress(message) {
      // 存储选中的消息
      this.selectedMessage = message;
      
      // 构建操作选项列表
      const itemList = [];
      
      // 如果是自己发送的消息且在可撤回时间内，显示撤回选项
      if (message.isSelf && this.canRecallMessage(message)) {
        itemList.push('撤回');
      }
      
      // 总是显示删除选项
      itemList.push('删除');
      
      // 显示原生ActionSheet
      uni.showActionSheet({
        itemList: itemList,
        success: (res) => {
          const selectedOption = itemList[res.tapIndex];
          
          if (selectedOption === '撤回') {
            this.recallMessage();
          } else if (selectedOption === '删除') {
            this.deleteMessage();
          }
        }
      });
    },
    
    // 撤回消息
    recallMessage() {
      if (!this.selectedMessage) return;
      
      // 发出撤回消息事件
      this.$emit('recall-message', {
        messageId: this.selectedMessage.id,
        targetId: this.targetId
      });
    },
    
    // 删除消息
    deleteMessage() {
      if (!this.selectedMessage) return;
      
      // 发出删除消息事件
      this.$emit('delete-message', {
        messageId: this.selectedMessage.id,
        targetId: this.targetId
      });
    },
    
    // 重发消息处理
    onMessageResend(message) {
      // 发出重发消息事件
      this.$emit('resend-message', {
        messageId: message.id,
        targetId: this.targetId
      });
    },
    
    // 图片预览处理
    onImagePreview(url) {
      uni.previewImage({
        urls: [url],
        current: url
      });
    },
    
    // 键盘高度变化处理
    onKeyboardHeightChange(res) {
      // 发出键盘高度变化事件
      this.$emit('keyboard-height-change', res);
    },
    
    // 键盘隐藏处理
    onKeyboardHide() {
      // 发出键盘隐藏事件
      this.$emit('keyboard-hide');
    },
    
    // 显示键盘
    showKeyboard() {
      this.$refs.chatInput.showKeyboard();
    },
    
    // 隐藏所有面板
    hideAllPanels() {
      this.$refs.chatInput.hideAll();
    },
    
    // 添加获取消息方法
    getMessage(messageId) {
      return this.$refs.messageList.getMessage(messageId);
    },
    
    // 判断消息是否可以撤回（5分钟内）
    canRecallMessage(message) {
      if (!message || !message.timestamp) return false;
      
      // 计算消息发送时间与当前时间的差值（毫秒）
      const now = Date.now();
      const messageTime = message.timestamp;
      const timeDiff = now - messageTime;
      
      // 消息发送后5分钟内可以撤回（5 * 60 * 1000 = 300000毫秒）
      return timeDiff <= 300000;
    },
    
    // 获取消息剩余可撤回时间文本
    getRecallTimeLeft(message) {
      if (!message || !message.timestamp) return '';
      
      const now = Date.now();
      const messageTime = message.timestamp;
      // 计算剩余可撤回时间（毫秒）
      const timeLeft = 300000 - (now - messageTime); // 5分钟 - 已过时间
      
      if (timeLeft <= 0) return '0秒';
      
      // 转换为分:秒格式
      const minutes = Math.floor(timeLeft / 60000);
      const seconds = Math.floor((timeLeft % 60000) / 1000);
      
      if (minutes > 0) {
        return `${minutes}分${seconds}秒`;
      } else {
        return `${seconds}秒`;
      }
    },
    
    // 添加微信处理
    onAddWeChat(userId) {
      // 直接转发用户ID
      this.$emit('add-wechat', userId || this.targetId);
    },
    
    // 完成微信处理
    onCompleteWeChat(data) {
      // 判断传入的是简单的userId还是完整的对象
      if (typeof data === 'object' && data !== null) {
        // 如果包含showPopup属性，这是来自ChatMessage组件的请求，直接传递
        if (data.showPopup) {
          this.$emit('complete-wechat', data);
          return;
        }
        
        // 新格式：传递完整对象，包含messageId、wechat和targetId
        this.$emit('complete-wechat', data);
      } else {
        // 旧格式：仅传递userId
        this.$emit('complete-wechat', data || this.targetId);
      }
    },
    
    // 查看微信处理
    onViewWeChat(userId) {
      // 处理查看微信事件
      this.$emit('view-wechat', userId || this.targetId);
    }
  }
}
</script>

<style lang="scss">
.chat-container {
  background-color: #020303;
  color: #FFFFFF;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 背景装饰元素 */
.chat-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bg-line {
  position: absolute;
  background: linear-gradient(90deg, rgba(179, 247, 60, 0) 0%, rgba(179, 247, 60, 0.3) 50%, rgba(179, 247, 60, 0) 100%);
  height: 1px;
  width: 100%;
  opacity: 0.15;
}

.bg-line-1 {
  top: 15%;
  animation: slide-right 20s linear infinite;
}

.bg-line-2 {
  top: 75%;
  animation: slide-left 25s linear infinite;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.05;
  background: radial-gradient(circle, rgba(179, 247, 60, 0.3) 0%, rgba(179, 247, 60, 0) 70%);
}

.bg-circle-1 {
  top: -150rpx;
  right: -150rpx;
  width: 500rpx;
  height: 500rpx;
}

.bg-circle-2 {
  bottom: -200rpx;
  left: -100rpx;
  width: 600rpx;
  height: 600rpx;
}

@keyframes slide-right {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes slide-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}


</style> 